<template>
  <div class="comment-container">
    <!-- 评论列表 -->
    <el-row :gutter="20" class="comment-list">
      <el-col :span="24" v-for="comment in comments" :key="comment.id">
        <el-card class="comment-card" shadow="hover">
          <div class="comment-header">
            <el-row type="flex" align="middle" justify="space-between" style="width: 100%;">
              <div class="comment-date">{{ formatDate(comment.current) }}</div>
              <el-link class="comment-date" @click="handleNews(comment)">前往资讯详情</el-link>
            </el-row>
          </div>
          <div class="comment-content">
            <p>{{ comment.content }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from "@/api";
import {formatDate} from "@/utils/date";
import {getCache} from "@/utils/useCache";

export default {
  name: "CommentView",
  data() {
    return {
      comments: [], // 评论列表数据
      user: getCache('USERINFO')
    };
  },
  mounted() {
    this.fetchComments();
  },
  methods: {
    formatDate,
    // 获取评论列表
    async fetchComments() {
      const response = await api.review.reviewList();
      const mockData = response.data.data;
      this.comments = mockData.filter((item) =>
          item.userId === this.user.id
      );
    },
    handleNews(e) {
      const name = JSON.stringify(e.name);
      const id = JSON.stringify(e.newsId);
      this.$router.push({
        path: "/user/news_detail?id=" + id,
        query: {name},
      })
    },
  }
};
</script>

<style scoped>
.comment-container {
  background-color: #f5f7fa;
}

.comment-list {
  margin-top: 20px;
}

.comment-card {
  overflow: hidden;
  transition: transform 0.3s;
  margin-bottom: 20px;
}

.comment-card:hover {
  transform: translateY(-5px);
}

.comment-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaea;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.comment-user-info {
  flex: 1;
}

.comment-username {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.comment-date {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.comment-content {
  padding: 15px;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}
</style>